<template>
    <div class="check-my-coupon-wrapper">
      <!--选择代金券-->
      <div class="check-coupon" v-if="hasCoupon === 1">
        <div class="my-coupon-list">
          <div class="my-coupon-item v-flex-row-between" v-for="item in couponList" :key="item.couponId">
            <div>
              <div class="discount-amount"><span>￥</span><span>{{item.discount}}</span></div>
              <div class="full-minus">满 <span>{{item.full}}</span> 元可用</div>
            </div>
            <div>
              <div class="appoint-store">{{item.storeName}}</div>
              <div class="use-date">{{item.useDate}}</div>
            </div>
            <div @click="toChecked(item)">
              <img src="/static/image/product_Details/checked-icon.png" alt="" class="check-icon-icon" v-if="checkedFlag === item.couponId">
              <img src="/static/image/product_Details/no-check.png" alt="" class="check-icon-icon" v-else>
            </div>
          </div>
        </div>
      </div>
      <!--没有代金券-->
      <div class="no-coupon-wrapper" v-if="hasCoupon === 0">
        <div class="no-coupon v-flex-column-center" >
          <div class="no-coupon-div">
            <img src="/static/image/product_Details/no-coupon.png" class="no-coupon-img">
          </div>
          <div class="no-coupon-text">您当前暂无代金券哦~</div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "checkCoupon.vue",
    data () {
      return {
        hasCoupon: 1,
        checkedFlag: 0,
        couponList: [
          {couponId:"c001e001",discount: 10,full: 100,storeName: '阿里巴巴旗舰店代金券',useDate: '2018/12/12——2018/12/31'},
          {couponId:"c001e002",discount: 10,full: 100,storeName: '阿里巴巴旗舰店代金券',useDate: '2018/12/12——2018/12/31'},
          {couponId:"c001e003",discount: 10,full: 100,storeName: '阿里巴巴旗舰店代金券',useDate: '2018/12/12——2018/12/31'}
        ]
      }
    },
    methods: {
      // 选择优惠券
      toChecked (item) {
        this.checkedFlag = item.couponId;
      }
    }
  };
</script>

<style scoped lang="less">
  .my-coupon-item {
    width:687rpx;
    height:152rpx;
    background-color:@bg_color;
    margin:31rpx 31rpx 0rpx 31rpx;
    padding:0rpx 61rpx 0rpx 45rpx;
  }


  .discount-amount {
    font-size:@font_size_36;
    color:#FF5050;
    font-weight:bold;
    line-height:51rpx;
  }
  .full-minus {
    font-size:@font_size_20;
    color:#333;
    line-height:51rpx;
  }
  .appoint-store {
    font-size:@font_size_28;
    font-weight:400;
    line-height:51rpx;
  }

  .use-date {
    font-size:@font_size_20;
    color:#B3B4B5;
    line-height:51rpx;
  }





  /*选择图标*/
  .check-icon-icon {
    width:50rpx;
    height:51rpx;
  }

   /*没有优惠券*/
  .no-coupon-wrapper {
    width:750rpx;
    height:1214rpx;
    background-color:@bg_color;
  }
  .no-coupon {
    position:fixed;
    top:310rpx;
    right:218rpx;
    bottom:667rpx;
    left:218rpx;
  }
  .no-coupon-img {
    width:314rpx;
    height:237rpx;
  }
  .no-coupon-text {
    font-size:@font_size_24;
    color:@font_gray_not_color;
  }
</style>
